<template>
	<div>
		<TodoInput></TodoInput>
		<TodoFilter></TodoFilter>
		<TodoItem
			v-for="todo in filteredTodoList"
			:todo="todo"
			:key="todo.id"
		></TodoItem>
	</div>
</template>
<script>
// 固定语法 pinia提供的mapState方法
import { mapState } from "pinia"

import TodoInput from "./components/TodoInput.vue"
import TodoFilter from "./components/TodoFilter.vue"
import TodoItem from "./components/TodoItem.vue"

import { useTodoStore } from "./stores/todoStore"

export default {
	components: {
		TodoInput,
		TodoFilter,
		TodoItem,
	},
	computed: {
    // mapState之后 就可以通过this.todoList 访问到 store 的 todoList
		...mapState(useTodoStore, ["todoList","filteredTodoList"]),
	},
}
</script>
